<template>
    <div class="login">
        <div class="warp-conter">
            <div class="left-bg">
                <div class="l-title">
                    <img src="../assets/images/login_slices/logo@2x.png" />
                    <p>近多出行后台管理系统</p>
                </div>
            </div>
            <div class="right-form">
                <div class="form-box">
                    <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginRules"
                        class="login-form"
                    >
                        <h3 class="title">欢迎登录</h3>
                        <el-form-item prop="username">
                            <el-input
                                v-model="loginForm.username"
                                type="text"
                                auto-complete="off"
                                placeholder="用户名"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="user"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                v-model="loginForm.password"
                                type="password"
                                auto-complete="off"
                                placeholder="登录密码"
                                @keyup.enter.native="handleLogin"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="password"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code" v-if="captchaEnabled">
                            <el-input
                                v-model="loginForm.code"
                                auto-complete="off"
                                placeholder="验证码"
                                style="width: 63%"
                                @keyup.enter.native="handleLogin"
                            >
                                <svg-icon
                                    slot="prefix"
                                    icon-class="validCode"
                                    class="el-input__icon input-icon"
                                />
                            </el-input>
                            <div class="login-code">
                                <img
                                    :src="codeUrl"
                                    @click="getCode"
                                    class="login-code-img"
                                />
                            </div>
                        </el-form-item>
                        <el-checkbox
                            v-model="loginForm.rememberMe"
                            style="margin: 0px 0px 25px 0px"
                            >记住密码</el-checkbox
                        >
                        <el-form-item style="width: 100%">
                            <el-button
                                :loading="loading"
                                size="medium"
                                type="primary"
                                style="width: 100% !important"
                                @click.native.prevent="handleLogin"
                            >
                                <span v-if="!loading">登 录</span>
                                <span v-else>登 录 中...</span>
                            </el-button>
                            <!-- <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div> -->
                        </el-form-item>
                    </el-form>
                    <div class="el-login-footer">
                        <span
                            >Copyright&nbsp;©2021&nbsp;Jinduo&nbsp;Mobility&nbsp;Services&nbsp;(Beijing)&nbsp;Corporation.&nbsp;京ICP备20025048号</span
                        >
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
    name: "Login",
    data() {
        return {
            codeUrl: "",
            loginForm: {
                username: "",
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的账号",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的密码",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请输入验证码",
                    },
                ],
            },
            loading: false,
            // 验证码开关
            captchaEnabled: true,
            // 注册开关
            register: false,
            redirect: undefined,
        };
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true,
        },
    },
    created() {
        this.getCode();
        this.getCookie();
    },
    methods: {
        getCode() {
            getCodeImg().then((res) => {
                this.captchaEnabled =
                    res.data.captchaEnabled === undefined
                        ? true
                        : res.data.captchaEnabled;
                if (this.captchaEnabled) {
                    this.codeUrl = "data:image/gif;base64," + res.data.img;
                    this.loginForm.uuid = res.data.uuid;
                }
            });
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get("rememberMe");
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            };
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set(
                            "password",
                            encrypt(this.loginForm.password),
                            { expires: 30 }
                        );
                        Cookies.set("rememberMe", this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove("rememberMe");
                    }
                    this.$store
                        .dispatch("Login", this.loginForm)
                        .then(() => {
                            this.$router
                                .push({ path: this.redirect || "/" })
                                .catch(() => {});
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaEnabled) {
                                this.getCode();
                            }
                        });
                }
            });
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("../assets/images/login_slices/bg@2x.png");
    background-size: cover;

    .warp-conter {
        position: relative;
        width: 63.3%;
        height: 66.7%;
        display: flex;
        min-width: 1078px;
        min-height: 560px;
        align-items: center;

        .left-bg {
            position: absolute;
            z-index: 1000;
            width: 50%;
            height: 100%;
            background: url("../assets/images/login_slices/xt@2x.png") no-repeat;
            background-size: 100% 100%;
            // background-percentage:100%100%;

            .l-title {
                margin: 40px 30px;

                img {
                    width: 155px;
                    height: 44px;
                    display: block;
                }

                p {
                    font-size: 16px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    color: #323f4b;
                    line-height: 45px;
                }
            }
        }

        .right-form {
            position: absolute;
            right: 0;

            display: flex;
            flex-direction: row-reverse;
            width: 80%;
            height: 86%;
            background-color: #fff;
            padding: 44px 50px;
            border-radius: 26px;
            .form-box {
                width: 55%;
                height: 100%;
            }
            .el-login-footer {
                font-size: 10px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #848587;
                line-height: 14px;
            }
        }
    }
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 38px;

        input {
            height: 38px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.login-code-img {
    height: 38px;
}
.warp-box {
    width: 100%;
    height: 100%;
}
</style>
